<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr>

    <!-- <p>购物车 值：{{ $store.state.cart.cartList }}</p> -->
    <p>购物车 值：{{ cartList }}</p>
    <!-- 如果直接访问getters，也是访问根里的 -->
    <!-- <p>总价： {{ $store.getters.totalPrice }}</p> -->
    <!-- <p>总价： {{ $store.getters['cart/totalPrice'] }}</p> -->
    <p>总价： {{ $store.getters['cart/totalPrice'] }}</p>

    <!-- 找根里的reqCartList -->
    <!-- <button @click="$store.dispatch('reqCartList')" class="btn btn-warning">-1</button> -->
    <button @click="$store.dispatch('cart/reqCartList')" class="btn btn-warning">-1</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  name: 'Right',
  computed: {
    // 简化cart模块里的cartList
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['totalPrice'])
  }
}
</script>

<style>
</style>
